var trendingVM = new Vue({
    el: '#trending',
    data() {
        return {
            show: false,
        }
    },
})

var loginConfirmVM = new Vue({
    el: '#login-confirm',
    data() {
        return {
            show: false,
        }
    },
    methods: {
        showPanel() {
            this.show = true
            $('#main-menu .nav-close').click()
        },
        login() {
            this.show = false
            $("#login-menu-item").click()
        }
    },
})

function s(v) {
    v = parseInt(v)
    return v < 10 ? ('0' + '' + v) : v
}

function cd($self, type, nextDraw, onChange, getData) {
    var countdown = nextDraw
    var Mcountdown = moment(countdown)
    var McountdownTS = Mcountdown.valueOf()
    var now = new Date().valueOf()
    var remainsSec = parseInt((McountdownTS - now) / 1000)
    remainsSec -= 330
    console.log('nextDraw=', nextDraw, 'McountdownTS-now=', remainsSec)

    var days = remainsSec <= 0 ? 0 : parseInt(remainsSec / 86400)
    var hours = remainsSec <= 0 ? 0 : parseInt(remainsSec % 86400 / 3600)
    var mins = remainsSec <= 0 ? 0 : parseInt(remainsSec % 3600 / 60)
    var secs = remainsSec <= 0 ? 0 : parseInt(remainsSec % 60)

    $self.children().remove()

    var $days = $('<div class="countdown-card--value">' + days + '</div>')
    var $hours = $('<div class="countdown-card--value">' + hours + '</div>')
    var $mins = $('<div class="countdown-card--value">' + mins + '</div>')
    var $secs = $('<div class="countdown-card--value">' + secs + '</div>')

    $self.append($('<div class="countdown-card"></div>').append('<div class="countdown-card--unit">день</div>').append($days))
    $self.append($('<div class="countdown-card"></div>').append('<div class="countdown-card--unit">час</div>').append($hours))
    $self.append($('<div class="countdown-card"></div>').append('<div class="countdown-card--unit">минут</div>').append($mins))
    $self.append($('<div class="countdown-card"></div>').append('<div class="countdown-card--unit">секунд</div>').append($secs))

    var ev

    var fn = function() {
        if (remainsSec <= 0) {
            $days.text('00')
            $hours.text('00')
            $mins.text('00')
            $secs.text('00')
            let current = getData().current
            current.circles = current.circles.map(function(){
                return '?'
            })
            current.specials = current.specials.filter(v => v).map(function(){
                return '?'
            })
            if(remainsSec <= -331) {
                console.log('remains', remainsSec)
                clearInterval(ev)
                // 设置下一个的定时器
                $.getJSON('/data.php?type=' + type, function(obj) {
                    $self.data('countdown', obj.nextDraw)
                    cd($self, type, obj.nextDraw, onChange, getData)
                    onChange && onChange(obj, type)
                })
                console.log('end')
            }
        } else {
            days = remainsSec <= 0 ? 0 : parseInt(remainsSec / 86400)
            hours = remainsSec <= 0 ? 0 : parseInt(remainsSec % 86400 / 3600)
            mins = remainsSec <= 0 ? 0 : parseInt(remainsSec % 3600 / 60)
            secs = remainsSec <= 0 ? 0 : parseInt(remainsSec % 60)

            $days.text(s(days))
            $hours.text(s(hours))
            $mins.text(s(mins))
            $secs.text(s(secs))
        }
        remainsSec--
    }

    // 构造倒计时
    fn()
    ev = setInterval(fn, 1000)
}

var drawsVM = new Vue({
    el: '#draws',
    data() {
        return {
            draws: draws,
        }
    },
    computed: {
        trending: function() {
            return function(data, i) {
                trendingVM.show = true
                trendingVM.$nextTick(function() {
                    showTrending(data, i)
                })
            }
        },
    },
    mounted: function() {
        var self = this
        var cds = $('.draw-cards--next-draw-date-countdown')
        this.draws.forEach(function(item, idx) {
            cd($(cds.get(idx)), item.type, item.nextDraw, function(data) {
                data.nextDraw && (item.nextDraw = data.nextDraw)
                data.current && (item.current = data.current)
                data.trending && (item.trending = data.trending)
            }, function(){
                return item
            })
        })
    }
})